<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="edu.zjut.sjq.bean.User" %>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  User user= (User) session.getAttribute("user");

%>
<!DOCTYPE html>
<html lang="en" class="app">
<head>  
  <meta charset="utf-8" />
  <title>设置</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/js/jPlayer/jplayer.flat.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/animate.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/simple-line-icons.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/app.css" type="text/css" />

  <link rel="stylesheet" href="${pageContext.request.contextPath}/js/datepicker/datepicker.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/js/slider/slider.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/js/chosen/chosen.css" type="text/css" />
    <!--[if lt IE 9]>
    <script src="${pageContext.request.contextPath}/js/ie/html5shiv.js"></script>
    <script src="${pageContext.request.contextPath}/js/ie/respond.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/ie/excanvas.js"></script>
  <![endif]-->
</head>
<body class="">

  <section class="vbox">
            <section class="scrollable wrapper">
              <div class="col-lg-offset-4 col-lg-4">
                <section class="panel panel-default">
                  <div class="panel-body">
                    <div class="clearfix text-center m-t">
                      <div class="inline">
                        <div class="easypiechart" data-percent="75" data-line-width="5" data-bar-color="#4cc0c1" data-track-Color="#f5f5f5" data-scale-Color="false" data-size="134" data-line-cap='butt' data-animate="1000">
                          <div class="thumb-lg">
                            <%if (user.getImgUrl()!=null && !user.getImgUrl().equals("")){%>
                            <img src="<%=(basePath)%>${user.imgUrl}" alt="暂无头像">
                            <%}else {%>
                            <img src="${pageContext.request.contextPath}/images/user.png" alt="暂无头像">
                            <%}%>
                          </div>
                        </div>
                        <div class="h4 m-t m-b-xs">
                          <span id="overUsername">${user.username}</span>
                        </div><!-- 用户名为申请的名字 -->
                        <small class="text-muted m-b">
                          <%if (user.getRole()==2){%>
                          <b>管理</b>&nbsp;
                          <%}else if (user.getRole()==1){%>
                          <b>教师</b>&nbsp;
                          <%}else{%>
                          <b>学生</b>&nbsp;
                          <%}%>
                        </small>
                      </div>                      
                    </div>
                  </div>
                </section>
              </div>
              <div class="col-sm-offset-1 col-sm-10">

                <!-- 修改头像 -->
                <section class="panel panel-default">
                  <header class="panel-heading font-bold">头像修改</header>
                  <div class="panel-body">
                    <form class="form-horizontal "enctype="multipart/form-data" id="uploadForm" method="post"  action="<%=(basePath)%>upload/img">
                      <div class="form-group">
                        <label class="col-lg-2 control-label">选择图片</label>
                        <div class="col-lg-8">
                          <input type="file" name="file" id="filePath" class="filestyle" data-icon="false" data-classButton="btn btn-default" data-classInput="form-control inline v-middle input-s">
                        </div>
                      </div>
                      <div class="form-group">
                        <div class="col-lg-offset-2 col-lg-8">
                          <div id="changeImg" class="btn btn-sm btn-default">提交</div>
                        </div>
                      </div>
                    </form>
                  </div>
                </section>

                <!-- 更改用户名之后上方用户名更改 -->
                <section class="panel panel-default">
                  <header class="panel-heading font-bold">用户名邮箱信息修改</header>
                    <div class="panel-body">
                      <form class="form-horizontal " method="get">

                        <div class="form-group">
                          <label class="col-lg-2 control-label">用户名</label>
                          <div class="col-lg-8">
                            <input type="name" id="username" class="form-control" placeholder="Name">
                          </div>
                        </div>
                        <div class="form-group">
                          <label class="col-lg-2 control-label">邮箱</label>
                          <div class="col-lg-8">
                          <input type="email" id="email" class="form-control" placeholder="Email">
                          </div>
                        </div>
                        <div class="form-group">
                          <div class="col-lg-offset-2 col-lg-8">
                            <div class="btn btn-sm btn-default" id="submitNameAndMail">提交</div><!-- 提交之后个人主页对应内容更改 -->
                          </div>
                        </div>
                      </form>
                    </div>
                  </section>




                <!-- 更改密码 -->
                  <section class="panel panel-default">
                  <header class="panel-heading font-bold">密码修改</header>
                    <div class="panel-body">
                      <form class="form-horizontal " method="get">
                        <div class="form-group">
                          <label class="col-lg-2 control-label">密码</label>
                          <div class="col-lg-8">
                            <input type="password" id="pwd1" class="form-control" placeholder="Password">
                          </div>
                        </div>
                        <div class="form-group">
                          <label class="col-lg-2 control-label">确认密码</label>
                          <div class="col-lg-8">
                            <input type="password" id="pwd2" class="form-control" placeholder="Confirm Password">
                          </div>
                        </div>
                        <div class="form-group">
                          <div class="col-lg-offset-2 col-lg-8">
                          <div id="updatePwd" class="btn btn-sm btn-default">提交</button>
                          </div>
                        </div>
                        </div>
                      </form>
                    </div>
                  </section>




                <!-- 添加详细信息 -->
                  <section class="panel panel-default">
                  <header class="panel-heading font-bold">个人真实信息提交</header>
                    <div class="panel-body">
                      <form class="form-horizontal " method="get">
                        <div class="form-group">
                          <label class="col-lg-2 control-label">学校</label>
                          <div class="col-lg-8">
                            <input type="name" class="form-control" id="schoolName" placeholder="School Name">
                          </div>
                        </div>
                        <div class="form-group">
                          <label class="col-lg-2 control-label">专业</label>
                          <div class="col-lg-8">
                          <input type="name" class="form-control" id="majorName" placeholder="Major Name">
                          </div>
                        </div>
                        <div class="form-group">
                          <label class="col-lg-2 control-label">姓名</label>
                          <div class="col-lg-8">
                            <input type="name" class="form-control" id="actualName" placeholder="Actual Name">
                            <span class="help-block m-b-none">请输入真实姓名</span>
                          </div>
                        </div>
                        <div class="form-group">
                          <label class="col-lg-2 control-label">性别</label>
                          <div class="col-lg-8">
                            <label class="radio radio-inline">
                              <input type="radio" name="sex"  value="1" checked="checked" >
                              男
                            </label>
                            <label class="radio radio-inline">
                              <input type="radio" name="sex"  value="0"  >
                              女
                            </label>
                          </div>
                        </div>
                        <div class="form-group">
                          <label class="col-lg-2 control-label">电话</label>
                          <div class="col-lg-8">
                            <input type="name" class="form-control" id="phone" placeholder="Phone Number">
                          </div>
                        </div>
                        <div class="form-group">
                          <div class="col-lg-offset-2 col-lg-8">
                          <div id="submitDetail" class="btn btn-sm btn-default">提交</button>
                          </div>
                        </div>
                        </div>
                      </form>
                    </div>
                  </section>


                <section class="panel panel-default">
                  <header class="panel-heading font-bold">身份申请</header>
                  <div class="panel-body">
                    <form class="form-horizontal " method="get">
                      <div class="form-group">
                        <label class="col-lg-2 control-label">身份</label>
                        <div class="col-lg-8">
                          <label class="radio radio-inline">

                          <input type="radio" name="role"  value="0" checked >
                              <!-- 角色为学生,可提交申请，申请通过之后跳转为老师，注意头像下方的角色也需要改变-->学生
                            </label>
                          <label class="radio radio-inline">
                              <input type="radio" name="role" value="1" >教师
                            </label>
                        </div>
                      </div>
                      <div class="form-group">
                        <div class="col-lg-offset-2 col-lg-8">
                          <div id="apply" class="btn btn-sm btn-default">申请</button>
                        </div>
                      </div>
                        </div>
                    </form>
                  </div>
                </section>
                </div>
             
                
            </section>
          </section>

  <script src="${pageContext.request.contextPath}/js/jquery-3.1.1.min.js"></script>
  <!-- Bootstrap -->
  <script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
  <!-- App -->
  <script src="${pageContext.request.contextPath}/js/app.js"></script>

  <!-- datepicker -->
  <script src="${pageContext.request.contextPath}/js/datepicker/bootstrap-datepicker.js"></script>
  <!-- slider -->
  <script src="${pageContext.request.contextPath}/js/slider/bootstrap-slider.js"></script>
  <!-- file input -->  
  <script src="${pageContext.request.contextPath}/js/file-input/bootstrap-filestyle.min.js"></script>
  <!-- wysiwyg -->
  <script src="${pageContext.request.contextPath}/js/wysiwyg/jquery.hotkeys.js"></script>
  <script src="${pageContext.request.contextPath}/js/wysiwyg/bootstrap-wysiwyg.js"></script>
  <script src="${pageContext.request.contextPath}/js/wysiwyg/demo.js"></script>
  <!-- markdown -->
  <script src="${pageContext.request.contextPath}/js/markdown/epiceditor.min.js"></script>
  <script src="${pageContext.request.contextPath}/js/markdown/demo.js"></script>

  <script src="${pageContext.request.contextPath}/js/slimscroll/jquery.slimscroll.min.js"></script>
  <script src="${pageContext.request.contextPath}/js/app.plugin.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/jPlayer/jquery.jplayer.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/jPlayer/add-on/jplayer.playlist.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/jPlayer/demo.js"></script>
  <script src="${pageContext.request.contextPath}/layer/layer.js"></script>
  <script>
    /*实现头像上传*/
    /*jqueryform*/
    $("#changeImg").click(function () {
      var index = layer.load(2, {shade: false});
      setTimeout(function () {
        upload(index);
      },1000);

    });


    function upload(index) {
      var formData = new FormData($( "#uploadForm" )[0]);
      $.ajax({
        //contentType:"multipart/form-data",
        type: "POST",
        url:getRootPath()+"/uploadImg",
        data:/*$('#uploadForm').serialize()*/formData,// 你的formid
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function(data) {
          layer.close(index);
          if (data.res==0){
            layer.msg(data.msg, {time: 3000, icon:2});
          }else {
            layer.msg(data.msg, {time: 3000, icon:6});
            setTimeout(function () {
              window.parent.location.href="${pageContext.request.contextPath}/page/indexpage.jsp?state=1"
            },1000);
          }
        },
        error: function(error) {
          layer.close(index);
          console.log(error)
        },
      });
    }


    function sleep(numberMillis) {
      var now = new Date();
      var exitTime = now.getTime() + numberMillis;
      while (true) {
        now = new Date();
        if (now.getTime() > exitTime)
          return;
      }
    }

  </script>
  <script>

    $("#submitNameAndMail").click(function () {
      var username=$("#username").val();
      var email=$("#email").val();
      if (username=="" && email==""){
        layer.msg('请填写需要修改信息！', {time: 3000, icon:5});
        return false;
      }
      var regInfo;
      if (username==""){
        regInfo={
          mailAddress:email,
          id:${user.id}
        };
      }else if (email==null){
        regInfo={
          username:username,
          id:${user.id}
        };
      }else {
        regInfo={
          username:username,
          mailAddress:email,
          id:${user.id}
        };
      }
      $.ajax({
        contentType:"application/json",
        url:getRootPath()+"/user/update",
        type:"post",
        dataType:"json",
        data:JSON.stringify(regInfo),
        success:function (data) {
          if (data.res==0){
            layer.msg(data.msg, {time: 3000, icon:2});
          }else {
            layer.msg(data.msg, {time: 3000, icon:6});
            setTimeout(function () {
              window.parent.location.href="${pageContext.request.contextPath}/page/indexpage.jsp?state=1"
            },1000);

          }

        },
        error:function (error) {
          layer.msg('连接失败！', {time: 3000, icon:5});
        }

      });

    });

    $("#updatePwd").click(function () {
      var pwd1=$("#pwd1").val();
      var pwd2=$("#pwd2").val();
      if (pwd1=="" ){
        layer.msg('请填写修改后的密码！', {time: 3000, icon:5});
        return false;
      }
      if (pwd2==""){
        layer.msg('请再次输入密码！', {time: 3000, icon:5});
        return false;
      }
      if (pwd1!=pwd2){
        layer.msg('两次输入密码不一致！', {time: 3000, icon:5});
        return false;
      }
      var regInfo={
        pwd:pwd1,
        id:${user.id}
      };
      submit(regInfo);
    });

    $("#submitDetail").click(function () {
      var schoolName=$("#schoolName").val();
      var majorName=$("#majorName").val();
      var phone=$("#phone").val();
      var actualName=$("#actualName").val();
      var sex=$("input[name='sex']:checked").val();
      //alert(sex);
      if (schoolName=="" ){
        layer.msg('请填写学校名称！', {time: 3000, icon:5});
        return false;
      }
      if (majorName==""){
        layer.msg('请填写专业名称！', {time: 3000, icon:5});
        return false;
      }
      if (actualName==""){
        layer.msg('请填写真实姓名！', {time: 3000, icon:5});
        return false;
      }
      if (phone=="" ){
        layer.msg('请填写联系方式！', {time: 3000, icon:5});
        return false;
      }
      var regInfo={
        schoolName:schoolName,
        majorName:majorName,
        actualName:actualName,
        phone:phone,
        sex:sex,
        id:${user.id}
      };
      submit(regInfo);

    });

    // 申请身份
    $("#apply").click(function () {
      var role=$("input[name='role']:checked").val();
      var real=${user.role};
      if (role==real){
        var name;
        if (role==0){
          name="学生";
        }else {
          name="教师";
        }
        layer.msg('您的身份已经是“'+name+'”！', {time: 3000, icon:5});
        return false;
      }
      var regInfo={
        role:role,
        userId:${user.id}
      };
      $.ajax({
        contentType:"application/json",
        url:getRootPath()+"/apply/updateRole",
        type:"post",
        dataType:"json",
        data:JSON.stringify(regInfo),
        success:function (data) {
          if (data.res==0){
            layer.msg(data.msg, {time: 4000, icon:2});
          }else {
            layer.msg(data.msg, {time: 4000, icon:6});
          }

        },
        error:function (error) {
          layer.msg('连接失败！', {time: 3000, icon:5});
        }

      });
    });


    function submit(regInfo) {
      $.ajax({
        contentType:"application/json",
        url:getRootPath()+"/user/update",
        type:"post",
        dataType:"json",
        data:JSON.stringify(regInfo),
        success:function (data) {
          if (data.res==0){
            layer.msg(data.msg, {time: 3000, icon:2});
          }else {
            layer.msg(data.msg, {time: 3000, icon:6});
          }

        },
        error:function (error) {
          layer.msg('连接失败！', {time: 3000, icon:5});
        }

      });
    }


    function getRootPath() {
      var curWwwPath = window.document.location.href;
      var pathName = window.document.location.pathname;
      var pos = curWwwPath.indexOf(pathName);
      var localhostPaht = curWwwPath.substring(0, pos);
      var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
      return (localhostPaht + projectName);
    }
  </script>
  </body>

</html>